<template>
  <view>
    <view class="u-p-l-24 u-p-r-24">
      
      <view class="c-item" v-for="i in 3" :key="i">
        <view class="flex-row justify-between align-center">
          <view class="c-radio on"></view>
          <view class="shop w600">
            <u-avatar src="https://picsum.photos/id/392/200/200" bg-color="#FF7950" mode="square" size="56"></u-avatar>
            <view class="name text-cut">就欧斯杜父</view>
          </view>
        </view>
        
        <view class="flex-row justify-between align-center" v-for="i in 3" :key="i">
          <view class="c-radio"></view>
          
          <view class="good w600">
            <u-avatar src="https://picsum.photos/id/392/200/200" bg-color="#FF7950" mode="square" size="180"></u-avatar>
            <view class="info">
              <view class="text-cut2">Air Jordan 1 Retro High OG “Origin Story”蜘蛛侠</view>
              
              <view class="u-p-t-8">
                <u-tag text="41码; 中国红; 物流配送" mode="dark" shape="circle" bg-color="#FFF3E1" color="#FFB849" />
              </view>
              
              <view class="flex-row justify-between align-center" style="margin-top: auto;">
                <view class="text-bold">￥666</view>
                <count v-model="test"></count>
              </view>
            </view>
          </view>
        </view>
        
        <view class="flex-row justify-between align-center u-p-t-8 u-p-b-8 yellow">
          <view>
            <u-tag text="商家活动" size="mini" shape="circle" color="#FFB849" mode="plain"></u-tag>
            <text class="u-font-24 u-p-l-8">已享满100元减20元</text>
          </view>
          
          <view>
            <text>选择</text>
          </view>
        </view>
        
        <view class="flex-row justify-between align-center u-p-t-8 u-p-b-8 yellow">
          <view>
            <u-tag text="商家优惠" size="mini" shape="circle" color="#FFB849" mode="plain"></u-tag>
            <text class="u-font-24 u-p-l-8">已享满100元减20元</text>
          </view>
          
          <view>
            <text>选择</text>
          </view>
        </view>
      </view>
      
    </view>
    
    <view class="u-p-80">
      <u-empty text="当前什么商品也没有~" mode="car"></u-empty>
    </view>
    
    <view class="f-center">
      <image src="../../static/icons/cnxh.png" style="width: 370rpx;height: 40rpx;" mode="widthFix"></image>
    </view>

    <view class="bar">
      <view class="flex-row align-center" @click="all = !all">
        <view class="c-radio" :class="{ on: all }"></view>
        <text class="u-p-8">全选</text>
      </view>
      <view class="flex-row align-center">
        <view class="u-p-r-24">合计：666</view>
        <my-btn :size="[190, 80, 30]" bg="#ffb849" color="#fff" inline round @click="$goto('/pages/order/tijiao')">结算</my-btn>
      </view>
    </view>
  </view>
</template>

<script>
  import count from './components/count.vue'
  export default {
    components: {
      count
    },
    data() {
      return {
        all: false,
        test: 2
      };
    }
  }
</script>

<style lang="scss">
  page {
    background: #eeecec;
  }
  
  .yellow {
    color: #FFB849;
  }
  
  .c-item {
    width: 100%;
    background: #fff;
    padding: 24rpx;
    border-radius: 24rpx;
    margin: 24rpx 0;
    
    .shop {
      display: flex;
      align-items: center;
      
      .name {
        font-size: 30rpx;
        width: 400rpx;
        padding: 0 16rpx;
      }
    }
    
    .good {
      margin: 24rpx 0;
      display: flex;
      justify-content: space-between;
      
      .info {
        width: 400rpx;
        display: flex;
        flex-direction: column;
      }
    }
  }
  
  .c-radio {
    width: var(--size);
    height: var(--size);
    background: url(../../static/icons/ra0.png) center / cover no-repeat;
    
    --size: 32rpx;
    
    &.on {
      background: url(../../static/icons/ra1.png) center / cover no-repeat;
    }
  }
  
  .w600 {
    width: 600rpx;
  }

  .bar {
    background: #fff;
    width: 750rpx;
    height: 100rpx;
    padding: 0 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: var(--window-bottom);
    font-size: 30rpx;
    
    .radio {
      width: 36rpx;
      height: 36rpx;
    }
  }
</style>
